<template>
    <div class="const flex_column_between">
        <div class="schedule_tit flex_center_between">
            <div class="flex_center">
                <span class="label font20">{{time}}课表 </span> 
                <span class="flex_center tag">
                    <span class="dian bgRay"></span> <span class="">未开始</span>
                </span> 
                <span class="flex_center tag">
                    <span class="dian bgGreen"></span><span class="">进行中</span> 
                </span>
                <span class="flex_center tag">
                    <span class="dian bgRed"></span><span class="">已过期</span>
                </span>
            </div>
            <div class="etext themeFont cur font18" @click="allFn">
                全部<i class="el-icon-arrow-right"></i>
            </div>
        </div>
        <div class="schedule_cont" v-loading="loading">
            <template v-if="listData.length > 0">
                <template v-for="item in listData">
                    <div class="schedule_list flex_center" v-for="(_item,index) in item.list" :key="index">
                        <div class="label_tag" :class="{bgRed: _item.status.value == 3, bgGreen: _item.status.value == 2, bgRay: _item.status.value == 0}"></div>
                        <div class="info_cont">
                            <div class="time">{{ _item.startTime }}-{{ _item.endTime }}</div>
                            <div class="s_name themeFont">{{ _item.course && _item.course.name }}</div>
                            <template v-if="_item.courseType && _item.courseType.value != 4">
                                <div class="n_texe">{{ _item.user && _item.user.name }}（{{_item.courseType && _item.courseType.name}}）  {{ _item.user && _item.user.agent }}</div>
                            </template>
                            <template v-else>
                                <div class="n_texe">{{ _item.user && _item.user.name }}  {{ _item.user && _item.user.agent }}</div>
                            </template>
                        </div>
                        <div class="icon_cont cur" v-loading="actionLoading[_item.id] || false">
                            <template v-if="[0, 2, 3].includes(_item.status.value)">
                                <img v-if="iPad" class="img_teach" src="@/assets/img/teach.png" alt="上课" srcset="" @click="startCourse(_item, 0)"/>
                            
                                <el-tooltip class="item" effect="dark" content="上课" placement="top" :hide-after="500" v-else>
                                    <img class="img_teach" src="@/assets/img/teach.png" alt="上课" srcset="" @click="startCourse(_item, 0)" />
                                </el-tooltip>
                            </template>


                            <template v-if="_item.status.value == 2">
                                <img class="img_class" src="@/assets/img/endclass.png" alt="结束课程" srcset="" @click="endCourse(_item)" v-if="iPad">

                                <el-tooltip class="item" effect="dark" content="结束课程" placement="top" :hide-after="500" v-else>
                                    <img class="img_class" src="@/assets/img/endclass.png" alt="结束课程" srcset="" @click="endCourse(_item)">
                                </el-tooltip>
                            </template>
                        </div>
                    </div>
                </template>
            </template>
            <template v-else>
                <empty type="0" text="暂无排课"></empty>
            </template>

            <!-- 全部课表弹窗 -->
            <bear_dialogVue
                ref="bearDialog"
                title="全部课表"
                :width="'50%'"
                :isUserFooter="false"
            >
                <template v-if="allList.length > 0">
                    <div class="allSchedule" v-for="item in allList">
                        <div class="flex_center">
                            <span class="label font20">{{item.date}}课表 </span>
                            <div class="tag_cont flex_center">
                                <span class="dian bgRay"></span> <span class="tag">未开始</span> 
                            </div>  
                            <div class="tag_cont flex_center">
                                <span class="dian bgGreen"></span><span class="tag">进行中</span> 
                            </div>
                            <div class="tag_cont flex_center">
                                <span class="dian bgRed"></span><span class="tag">已过期</span>
                            </div>
                        </div>
                        <div class="schedule_list flex_center_between" style="width: 100%;" v-for="(_item,index) in item.list" :key="index">
                            <div class="label_tag" :class="{bgRed: _item.status.value == 3, bgGreen: _item.status.value == 2, bgRay: _item.status.value == 0}"></div>
                            <div class="info_cont">
                                <div class="time font26">{{ _item.startTime }}-{{ _item.endTime }} </div>
                                <div class="s_name themeFont font18">{{ _item.course && _item.course.name }}</div>
                                <template v-if="_item.courseType && _item.courseType.value != 4">
                                    <div class="n_texe font18">{{ _item.user && _item.user.name }}（{{_item.courseType && _item.courseType.name}}）  {{ _item.user && _item.user.agent }}</div>
                                </template>
                                <template v-else>
                                    <div class="n_texe font18">{{ _item.user && _item.user.name }}  {{ _item.user && _item.user.agent }}</div>
                                </template>
                            </div>

                            <div class="icon_cont cur" v-loading="actionLoading[_item.id] || false">
                                <template v-if="[0, 2, 3].includes(_item.status.value)">
                                    <img v-if="iPad" class="img_teach" src="@/assets/img/teach.png" alt="" srcset="" @click="startCourse(_item, 1)" />
                                
                                    <el-tooltip class="item" effect="dark" content="上课" placement="top" :hide-after="500" v-else>
                                        <img class="img_teach" src="@/assets/img/teach.png" alt="" srcset="" @click="startCourse(_item, 1)" />
                                    </el-tooltip>
                                </template>

                                <template v-if="_item.status.value == 2">
                                    <img class="img_class" src="@/assets/img/endclass.png" alt="" srcset="" @click="endCourse(_item, 1)" v-if="iPad">

                                    <el-tooltip class="item" effect="dark" content="结束课程" placement="top" :hide-after="500" v-else>
                                        <img class="img_class" src="@/assets/img/endclass.png" alt="" srcset="" @click="endCourse(_item, 1)">
                                    </el-tooltip>
                                </template>
                            </div>
                        </div>
                    </div>
                </template>
                <template v-else>
                    <empty type="0" text="暂无排课"></empty>
                </template>
            </bear_dialogVue>
        </div>
    </div>
</template>

<script>
import {getDateCurren} from '@/utils/base.js'
import { appointmentList, appointmentFinish } from '@/api/appointment.js'
import {  startLearn, endLearn } from '@/api/learn.js'
import { finishCourse } from '@/api/articleExercise.js'
import bear_dialogVue from '@/views/components/bear_dialog.vue'
export default {
    components:{
        bear_dialogVue
    },
    data() {
        return {
            loading: false,
            actionLoading: [],
            time: getDateCurren(),
            listData: [],
            allList: [],
            iPad: navigator.maxTouchPoints > 1
        }
    },
    mounted(){
        this.getList()
    },
    destroyed() {
        let list = document.getElementsByClassName("el-tooltip__popper");
        if (list.length > 0) {
            list[list.length - 1].style.display = "none";
            if(list.length>1){
                list[list.length - 2].style.display = "none";
            }
        }   
    },
    methods:{
        getList() {
            this.loading = true
            appointmentList({
                startDate: this.time
            }).then(res => {
                this.loading = false
                if (res.error === 0) {
                    this.listData = res.data
                }
            })
        },
        //获取全部课表
        allFn(){
            appointmentList().then(res => {
                if (res.error === 0) {
                    this.allList = res.data
                    this.$refs.bearDialog.openDialog();
                }
            })
        },
        // 开始上课
        startCourse(row, flag) {
            console.log('row', row);
        
            // 取消课程到期判断
            // if (row.status.value == 3 && row.date != this.time) {
            //     if (flag == 1) {
            //         this.$message.error({ el: this.$refs.bearDialog.$el, message: '该课程已过期' })
            //     }else {
            //         this.$message.error('该课程已过期')
            //     }
            //     return false
            // }

            // 判断date是否等于今天，且时间是否大于当前时间
            let timestamp = Date.parse(row.date);
            let timestamp2 = Date.parse(this.time);
            if (row.date != this.time && timestamp > timestamp2) {
                if (flag == 1) {
                    this.$message.error({ el: this.$refs.bearDialog.$el, message: '该课程未到开始上课时间' })
                }else {
                    this.$message.error('该课程未到开始上课时间')
                }
                return false
            }

            
            let userId = row.user && row.user.id || 0
            if (row.learn) {
                if (row.learn.status == 2) {
                    if (flag == 1) {
                        this.$message.error({ el: this.$refs.bearDialog.$el, message: '该课程已结束' })
                    }else {
                        this.$message.error('该课程已结束')
                    }
                    return false
                }

                if (row.learn.status == 1) {
                    let timestamp = Date.parse(row.learn.finishTime);
                    let timestamp2 = Date.parse(new Date());
                    if (timestamp < timestamp2) {
                        if (flag == 1) {
                            this.$message.error({ el: this.$refs.bearDialog.$el, message: '该课程已到下课时间~' })
                        }else {
                            this.$message.error('该课程已到下课时间~')
                        }
                        return false
                    }
                }

                this.$store.commit('user/setFull',true)
                this.$router.push({
                    path: '/work/studytype',
                    query: {
                        learnId: row.learn.id,
                        userId: userId,
                        appointmentId: row.id,
                    }
                })
                return false
            }else if (row.courseCategoryId == 4) {
                // 阅读课程
                this.$store.commit('user/setFull',true)
                this.$router.push({
                    path: '/work/studytype',
                    query: {
                        appointmentId: row.id,
                        userId: userId
                    }
                })
            }else {
                this.actionLoading = []
                this.actionLoading[row.id] = true
                let param = {
                    appointmentId: row.id,
                    userId: userId,
                    courseId: row.course && row.course.id
                }
                startLearn(param).then(res => {
                    this.actionLoading[row.id] = false
                    if (res.error == 0) {
                        let learnId = res.data.id
                        this.$store.commit('user/setFull',true)
                        this.$router.push(`/work/studytype?learnId=${learnId}&userId=${userId}&appointmentId=${row.id}`)
                    }
                }).finally(() => {
                    this.actionLoading.splice(row.id, 1)
                }).catch(() => {
                    this.actionLoading.splice(row.id, 1)
                });
            }
        },
        endCourse(row, flag) {
            if (row.status.value != 2) {
                if (flag == 1) {
                    this.$message.error({ el: this.$refs.bearDialog.$el, message: '该课程不在上课中' })
                }else {
                    this.$message.error('该课程不在上课中')
                }
                return false
            }

            if (this.actionLoading[row.id]) {
                return false
            }

            this.$confirm('确定要结束该课程吗？', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.actionLoading = []
                this.actionLoading[row.id] = true

                appointmentFinish({
                    id: row.id,
                    userId: row.user && row.user.id || 0
                }).then(res => {
                    this.actionLoading[row.id] = false
                    if (res.error == 0) {
                        if (flag == 1) {
                            this.$message.success({ el: this.$refs.bearDialog.$el, message: '操作成功' })
                            this.allFn()
                            this.getList()
                        }else {
                            this.$message.success('操作成功')
                            this.getList()
                        }
                    }
                }).finally(() => {
                    this.actionLoading.splice(row.id, 1)
                }).catch(() => {
                    this.actionLoading.splice(row.id, 1)
                });

            }).catch(() => {
                this.actionLoading = []
            });
        },
        checkDate(date) {
            return date == this.time
        }
    }
}
</script>

<style lang="scss" scoped>
@import "~@/styles/mixins.scss";
.focusing{
  display: none ;
}
.const{
    width: 100%;
    height: 100%;
    
}
.schedule_tit{
    width: 100%;
    margin-bottom: 1rem;
    .label{
        font-size: 2.2rem;
        margin-right:2.6rem;
    }
    .tag{
        color: #626780;
        font-size: 1.4rem;
        margin-right: 2.8rem;
        background: #F7F8FA;
        padding: .6rem 1rem;
        border-radius: 8px;
    }
    .dian{
        width: 10px;
        height: 10px;
        border-radius: 50%;
        margin-right: 8px;
    }
    .etext{
        font-size: 1.8rem;
        .el-icon-arrow-right{
            font-size: 1.6rem;
        }
    }
}
.tag_cont{
    padding: 6px 10px;
    background: #F7F8FA;
    border-radius: 4px;
    margin-left: 8px;
    .dian{
        width: 10px;
        height: 10px;
        border-radius: 50%;
        margin-right: 8px;
        display: block;
    }
    .tag{
        color: #626780;
        font-size: 1.4rem;
    }
}
.schedule_cont{
    width: 100%;
    height: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-content: flex-start;
    // margin-top: 15px;
    flex: 1;
    box-sizing: border-box;
    overflow-y: auto;
    &::-webkit-scrollbar {
        width: 6px;
        height: 1px;
    }
    &::-webkit-scrollbar-thumb { 
        border-radius: 5px;
        background-color:#019E69;
    }
    &::-webkit-scrollbar-track { 
        background: #fff;
        border-radius: 5px;
    }
}
.allSchedule{
    padding: 0 4rem;
    margin-bottom: .5rem;
}
    .schedule_list{
        width: 49%;
        // height: 100%;
        // height: 7.2rem;
        // height: 12rem;
        margin-top: 1.5rem;
        background: #F7F8FA;
        border-radius:0 2rem 2rem 0;
        &:hover{
            background: rgba(11, 154, 255, .1);
        }
        .label_tag{
            width: 7px;
            height: 100%;
            border-radius: 10px 0px 0px 10px;
            display:inline-block;
        }
        .info_cont{
            width: 78%;
            padding: 2rem 2.4rem;
            .time{
                font-size: 2.6rem;
                color: #3A3F5E;
                font-weight: bold;
            }
            .s_name{
                font-size: 1.8rem;
                margin-top: 9px;
            }
            .n_texe{
                font-size: 1.8rem;
                font-weight: normal;
                letter-spacing: 0em;
                color: #626780;
                margin-top: 12px;
                width: 100%;
                overflow: hidden;
                text-overflow:ellipsis;
                white-space: nowrap
            }
        }
        .icon_cont{
            width: 20%;
            text-align: center;
            display: flex;
            align-items: center;
            justify-content: flex-end;
           img{
            margin-right: 5px;
           }
            .img_print{
                width: 3.2rem;
                height: 3.2rem;
                position: relative;
                &:hover{
                    content: url(@/assets/img/print_1.png);
                }
               
            }
            .img_class{
                width: 3.2rem;
                height: 3.2rem;
            }
            .img_teach{
                width: 3.2rem;
                height: 3.2rem;
                position: relative;

                &:hover{
                    content: url(@/assets/img/teach_1.png);
                    // &::after {
                    //     display: block;
                    // }
                }

                // &::after {
                //     content: '上课';
                //     // display: none;
                //     position: absolute;
                //     top: 20px;
                //     left: 0;
                //     background-color: #333;
                //     color: #019E69;
                //     padding: 5px;
                //     border-radius: 3px;
                //     display: block;

                // }
            }
            // .img_teach :after {
            //     content: attr(alt);
            //     // display: none;
            //     position: absolute;
            //     top: 20px;
            //     left: 0;
            //     background-color: #333;
            //     color: #019E69;
            //     padding: 5px;
            //     border-radius: 3px;
            // }
        }
    }

</style>
